<template>
  <div class="MyMenu h100 middleCol" style="width: 40%">
    <div class="r20 mgl10 mgr10 width100 bsz box-shadow pad10">
      <div class="avatar r-50">
        <UserAvatar />
      </div>
      <div class="content">
        <div class="item" v-for="item in CourseData">
          <div class="name">{{ item.name }}</div>
          <div class="value" v-if="item.name != '在校情况'">
            {{ item.value }}
          </div>
          <div class="value" v-else>
            <div class="status" v-show="UserInfo.SchoolState == 1">
              {{ item.value }}
            </div>
            <div class="end" v-show="UserInfo.SchoolState == 2">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="MyMenu appMain box-shadow h100 pad10 r20" style="width: 60%">
    <div class="disableInfo">
      <div class="item">
        <div class="name">姓名</div>
        <div class="value">
          {{ UserInfo.Name }}
        </div>
      </div>
      <div class="item">
        <div class="name">性别</div>
        <div class="value">
          {{ UserInfo.Sex }}
        </div>
      </div>
      <div class="item">
        <div class="name">出生日期</div>
        <div class="value">
          {{ UserInfo.Birthday }}
        </div>
      </div>
      <div class="item">
        <div class="name">身份证</div>
        <div class="value">
          {{ UserInfo.IDCard }}
        </div>
      </div>
    </div>
    <div class="InputInfo">
      <el-form
        :model="FormData"
        label-position="top"
        :rules="rules"
        inline
        class="w100"
      >
        <div class="content">
          <el-form-item label="籍贯">
            <MyCascader
              v-model="FormData.Ancestral"
              style="width: 100%"
              :props="{
                label: 'cityName',
                value: 'cityName',
                children: 'city'
              }"
              Category="籍贯"
            />
          </el-form-item>
          <el-form-item label="民族">
            <Selector
              category="民族"
              v-model="FormData.Nation"
              style="width: 100%"
            ></Selector>
          </el-form-item>
          <el-form-item label="手机号" prop="Phone">
            <el-input v-model="FormData.Phone" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱">
            <el-input v-model="FormData.Email" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="学历">
            <el-input
              v-model="FormData.Education"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </div>
        <div class="width100">
          <el-form-item label="其他备注">
            <el-input
              type="textarea"
              v-model="FormData.Remark"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div class="submit">
        <el-button type="primary" size="large" @click="handleEdit" round
          >保 存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup name="Infomation">
import UserAvatar from '@/views/system/User/profile/UserAvatar';
import { GetUserDetail, EditUser } from '@/api/system/user.js';
import useUserStore from '@/store/modules/user.js';
const { proxy } = getCurrentInstance();
const rules = {
  Email: [
    {
      type: 'email',
      required: true,
      message: '请输入邮箱地址格式',
      trigger: 'blur'
    }
  ],
  Phone: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: '请输入11位手机号码',
      required: true,
      trigger: 'blur'
    }
  ]
};
const CourseData = ref([]);
const ID = computed(() => useUserStore().userInfo.ID);
const UserInfo = ref({});
const FormData = ref({});

onMounted(() => {
  init();
});
async function init() {
  try {
    let res = await GetUserDetail({ ID: ID.value });

    FormData.value = {
      ...res.data.Info,
      AccessionDate: res.data?.Info?.AccessionDate?.slice(0, 10),
      Birthday: res.data?.Info?.Birthday?.slice(0, 10),
      Ancestral: res.data?.Info?.Ancestral
        ? res.data?.Info?.Ancestral?.split('/')
        : res.data?.Info?.Ancestral
    };
    UserInfo.value = FormData.value;
    console.log(FormData.value);
    CourseData.value = [
      {
        name: '用户名',
        value: FormData.value.Account
      },
      {
        name: FormData.value.Type == 1 ? '班级' : '部门',
        value:
          FormData.value.Type == 1
            ? FormData.value.Name_Class
            : FormData.value.Name_Dept
      },
      {
        name: FormData.value.Type == 1 ? '入学日期' : '入职日期',
        value: FormData.value.AccessionDate?.slice(0, 10)
      },
      {
        name: '在校情况',
        value:
          FormData.value.Type == 1
            ? FormData.value.SchoolState == 1
              ? '在校'
              : '离校'
            : FormData.value.SchoolState == 1
            ? '在职'
            : '离职'
      }
    ];
  } catch (error) {
    console.log(error);
  }
}
async function handleEdit() {
  try {
    let query = {
      ...UserInfo.value,
      Ancestral:
        typeof UserInfo.value.Ancestral == 'object'
          ? UserInfo.value.Ancestral?.join('/')
          : UserInfo.value.Ancestral
    };
    await EditUser(query);
    proxy.$modal.msgSuccess('修改成功');
    init();
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
.middleCol {
  display: flex;
  align-self: flex-end;
  min-height: calc(100vh - 208px);
  // margin: 0 10px;
  .avatar {
    display: flex;
    justify-content: center;
    margin-top: -75px;
  }
  .content {
    margin-top: 40px;
    text-align: center;
    .item {
      border-bottom: 1px solid #ddd;
      margin: 0 40px;
      padding: 20px 0;
      &:last-child {
        border: none;
      }
      .name {
        color: #3c3c3c;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 24px;
      }
      .value {
        color: #9e9e9e;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        .status {
          // padding: 10px 42px;
          width: 120px;
          height: 40px;
          line-height: 40px;
          background-color: #bff5f1;
          text-align: center;
          color: #1fb2a9;
          font-weight: bold;
          border-radius: 20px;
        }
        .end {
          width: 120px;
          height: 40px;
          line-height: 40px;
          background-color: #f7cbcb;
          text-align: center;
          color: #d61616;
          font-weight: bold;
          border-radius: 20px;
        }
      }
    }
  }
}
.disableInfo {
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #ddd;
  margin: 0 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  .item {
    margin: 0 10px 20px;
    .name {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    .value {
      color: #979797;
      background-color: rgba(0, 0, 0, 0.04);
      height: 32px;
      line-height: 32px;
      padding: 0 10px;
      border-radius: 10px;
      font-size: 14px;
      color: #3c3c3c;
    }
  }
}
.InputInfo {
  padding: 20px 0 20px 0;
  margin: 0 20px;
  :deep(.el-form) {
    .el-form-item {
      .el-form-item__label {
        color: #3c3c3c;
        font-size: 18px;
      }
    }
  }
  .content {
    width: 100%;
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    .item {
      .name {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 10px;
      }
    }
  }
  .submit {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
